<template>
  <div id="field" class="field">
    <select v-model="classA" @change="changeAddressClassA">
      <option value="">一级领域</option>
      <option :value="item.classA" v-for="item in fieldData">{{item.classA}}</option>
    </select>
    <select v-model="classB" @change="changeAddressClassB">
      <option value="">二级领域</option>
      <option :value="item.name" v-for="item in states">{{item.name}}</option>
    </select>
  </div>
</template>
<script type="text/javascript">
import fieldData from './fieldData'
export default {
  data() {
    return {
      fieldData: fieldData,
      classA: '',
      classB: ''
    }
  },
  methods: {
    changeAddressClassA() {
      if (!this.classA) {
        this.classB = ''
      }
      this.$emit('addressChanged')
    },
    changeAddressClassB() {
      this.$emit('addressChanged')
    }
  },
  computed: {
    states() {
      if (!this.classA) {
        return []
      } else {
        var arr = []
        fieldData.forEach((item, index) => {
          if (this.classA === item.classA) {
            arr = item.classB
          }
        })
        return arr
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.field {
  display: inline-block;
}

select {
  width: 150px;
  margin-right: 7px;
  height: 40px;
  border: 1px solid #ddd;
}

</style>
